<template>
	<view class="body-bar">
		<view class="service-bar" v-for="item in packageData" :key="item._id" style="width: 686rpx;">
			<view>
				<image :src="item.image"></image>
				<view>
					<text
						style="font-size: 32rpx;color: #333;line-height: 32rpx;margin-bottom: 32rpx;">{{item.name}}</text>
					<view class="tag-bar">
						<view class="tag-item" v-for="i in item.tagIds" :key="item._id">{{i.name}}</view>
					</view>
				</view>
			</view>
			<view class="toItem" @click="toPackItem(item._id)">查看项目</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getServicePackageByUserApi
	} from '../../../api/servicePackage';
	import {
		useUserStore
	} from '../../../store/user';
	import {
		onLoad,
	} from '@dcloudio/uni-app';

	const packageData = ref([])
	const userStore = useUserStore()

	onLoad(() => {
		getPackages()
	})

	// 跳转服务项目
	function toPackItem(data) {
		uni.navigateTo({
			url: `/serviceStep/pages/servicePackItem/servicePackItem?_id=${data}`
		})
	}
	const pack = ref([])
	// 获取居民服务包
	function getPackages() {
		getServicePackageByUserApi({
				residentId: userStore.userInfo._id
			})
			.then(res => {
				if (res.code == 200) {

					res.data?.filter(item => {
						if (!pack.value.includes(item._id)) {
							pack.value.push(item._id)
							packageData.value.push(item)
						}
					})

				}
			})
	}
</script>

<style scoped>
	.body-bar {
		min-height: 100vh;
		width: 750rpx;
		background-color: rgba(242, 242, 242, 1);
		padding: 32rpx 32rpx 0;

	}

	.service-bar {
		width: 686rpx;
		min-height: 200rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		margin-bottom: 32rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
	}

	.service-bar image {
		width: 160rpx;
		height: 124rpx;
		margin-right: 10rpx;
	}

	.service-bar>view>view {
		display: inline-block;

	}

	.service-bar>view {
		display: flex;
		align-items: center;
	}

	.tag-bar {
		display: inline-block;
		min-height: 48rpx;
		margin-top: 24rpx;
		display: flex;
		flex-wrap: wrap;

	}

	.tag-item {
		white-space: nowrap;
		height: 58rpx;
		font-size: 24rpx;
		display: inline-block;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #3DD4A7;
		background-color: rgba(61, 212, 167, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		line-height: 24rpx;
		border-radius: 48rpx;
	}

	.toItem {
		height: 64rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 64rpx;
		background-color: rgba(41, 132, 248, 1);
		border-radius: 48rpx;
	}
</style>